<template>
 <div class="wrapper">
  <swiper :options="swiperOption" ref='mySwiper'>
  

    <swiper-slide  v-for="item of swiperList" :key='item.id'>
    
    <img  class="swiper-img" :src='item.imgUrl'/>
    </swiper-slide>
  
   
    <div class="swiper-pagination"  slot="pagination"></div>
    
   
  </swiper>
 
 </div>
</template>

<script>
export default {
    props: {

    },
    data() {
        return {

    swiperOption:{
        pagination:'.swiper-pagination',
        // loop:true,
        // autoplay: 1000,
         paginationClickable: true,
          spaceBetween: 30,
          centeredSlides: true,
          autoplayDisableOnInteraction: false
    },
    swiperList:[
        {
            id:"001",
            imgUrl:"http://img1.qunarzz.com/piao/fusion/1811/f7/72ce947f4dff4c02.jpg_750x200_aa583dba.jpg"
        },
        {
            id:"002",
            imgUrl:"http://img1.qunarzz.com/piao/fusion/1811/39/6b1f0402bb1d5902.jpg_750x200_3c7661d6.jpg"
        }
    ]

        };
    },
    computed: {
swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    created() {

    },
    mounted() {
        // this.swiper.slideTo(3, 1000, true)
    },

  
    watch: {

    },
    methods: {
  },
    components: {

    },
};
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active 
    background:white!important
    
.wrapper
    width:100%
    height:0
    overflow:hidden
    padding-bottom:26.66%
    background:#ccc

    .swiper-img
        width:100%   
        
</style>

